import React from 'react';
import { Typography, Space } from 'antd';
import { getClosestMultipleOfFour } from '@/utils/marketingMap/utils';

// const colors = ['#4dcb73', '#fad337', '#ff922e', '#ff594c'];
const colors = ['#4dcb73', '#fad337', '#ffa500', '#ff0000'];

const IntervalCard: React.FC<{ name?: string; max: number }> = ({
  name = '常驻车辆数（台）',
  max,
}) => {
  const maxNum = getClosestMultipleOfFour(max);

  if (maxNum < 4) {
    return (
      <Space style={{ userSelect: 'none' }} size={6} direction="vertical">
        <Typography.Text style={{ fontSize: 14 }}>{name}</Typography.Text>
        <Space size={12}>
          <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[3] }}></div>
          <span>0 {'<'} 4（含）</span>
        </Space>
      </Space>
    );
  }

  if (maxNum === 4) {
    return (
      <Space style={{ userSelect: 'none' }} size={6} direction="vertical">
        <Typography.Text style={{ fontSize: 14 }}>{name}</Typography.Text>
        <Space size={12}>
          <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[3] }}></div>
          <span>
            3 {'<'} 4（含）
          </span>
        </Space>
        <Space size={12}>
          <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[2] }}></div>
          <span>
            2 {'<'} 3（含）
          </span>
        </Space>
        <Space size={12}>
          <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[1] }}></div>
          <span>
            1 {'<'} 2（含）
          </span>
        </Space>
        <Space size={12}>
          <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[0] }}></div>
          <span>
            0 {'<'} 1（含）
          </span>
        </Space>
      </Space>
    );
  }

  return (
    <Space style={{ userSelect: 'none' }} size={6} direction="vertical">
      <Typography.Text style={{ fontSize: 14 }}>{name}</Typography.Text>
      <Space size={12}>
        <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[3] }}></div>
        <span>
          {(maxNum * 3) / 4} {'<'} {maxNum}（含）
        </span>
      </Space>
      <Space size={12}>
        <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[2] }}></div>
        <span>
          {(maxNum * 2) / 4 + 1} {'<'} {(maxNum * 3) / 4}（含）
        </span>
      </Space>
      <Space size={12}>
        <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[1] }}></div>
        <span>
          {(maxNum * 1) / 4 + 1} {'<'} {(maxNum * 2) / 4 + 1}（含）
        </span>
      </Space>
      <Space size={12}>
        <div style={{ height: 8, width: 8, borderRadius: 2, background: colors[0] }}></div>
        <span>
          0 {'<'} {(maxNum * 1) / 4 + 1}（含）
        </span>
      </Space>
    </Space>
  );
};

export default IntervalCard;
